<h1 mat-dialog-title>Export as SVG</h1>
<div mat-dialog-content>
  <div style="display:flex">
    <div style="flex:1">
      <div style="margin-bottom:8px">
        Style
      </div>
      <div style="display:flex">
        <div style="margin-right: 32px;">
          <div>
            <mat-checkbox class="example-margin" [ngModel]="fill" (ngModelChange)="fill=$event;stroke=stroke||!$event">Fill</mat-checkbox>
          </div>
          <mat-form-field floatLabel="always" appearance="fill" style="width:121px; margin-right:8px">
            <mat-label>Fill Color</mat-label>
            <input matInput [(ngModel)]="fillColor" [disabled]="!fill">
          </mat-form-field>
        </div>
        <div>
          <div>
            <mat-checkbox class="example-margin" [ngModel]="stroke" (ngModelChange)="stroke=$event;fill=fill||!$event">Stroke</mat-checkbox>
          </div>
          <mat-form-field floatLabel="always" appearance="fill" style="width:121px; margin-right:8px">
            <mat-label>Stroke Color</mat-label>
            <input matInput [(ngModel)]="strokeColor" [disabled]="!stroke">
          </mat-form-field>
          <mat-form-field floatLabel="always" appearance="fill" style="width:121px;">
            <mat-label>Stroke width</mat-label>
            <input matInput [(ngModel)]="strokeWidth" [disabled]="!stroke">
          </mat-form-field>
        </div>
      </div>
      
      <div style="display: inline-block; position: relative;">
        <div style="margin:8px 0">ViewBox</div>
        <button mat-flat-button (click)="refreshViewbox()" color="basic" style="position: absolute;top:0;right:0;">Reset</button>
        <mat-form-field floatLabel="always" appearance="fill" style="width:97px; margin-right:8px">
          <mat-label>X</mat-label>
          <input matInput [(ngModel)]="x">
        </mat-form-field>
        <mat-form-field floatLabel="always" appearance="fill" style="width:97px; margin-right:8px">
          <mat-label>Y</mat-label>
          <input matInput [(ngModel)]="y">
        </mat-form-field>
        <mat-form-field floatLabel="always" appearance="fill" style="width:97px; margin-right:8px">
          <mat-label>Width</mat-label>
          <input matInput [(ngModel)]="width">
        </mat-form-field>
        <mat-form-field floatLabel="always" appearance="fill" style="width:97px;">
          <mat-label>Height</mat-label>
          <input matInput [(ngModel)]="height">
        </mat-form-field>
      </div>
    </div>
    <div>
      <svg [attr.viewBox]="x+' '+y+' '+width+' '+height"
      style="margin:0 0 0 24px;"
      width="300" height="300"
      xmlns="http://www.w3.org/2000/svg"
      >
        <pattern id="preview-pattern" x="0" y="0" width="16" height="16" patternUnits="userSpaceOnUse" [attr.patternTransform]="'scale('+patternScale(400, 400)+')'">
          <rect x="0" y="0" width="16" height="16" fill="white"></rect>
          <rect x="0" y="0" width="8" height="8" fill="#cccccc"></rect>
          <rect x="8" y="8" width="8" height="8" fill="#cccccc"></rect>
        </pattern>
        <clipPath id="preview-clippath">
          <rect [attr.x]="x" [attr.y]="y" [attr.width]="width" [attr.height]="height"></rect>
        </clipPath>
        <rect [attr.x]="x" [attr.y]="y" [attr.width]="width" [attr.height]="height" fill="url(#preview-pattern)" ></rect>
        <path [attr.d]="data.path" [attr.fill]="fill?fillColor:'none'" [attr.stroke-width]="strokeWidth" [attr.stroke]="stroke?strokeColor:'none'" clip-path="url(#preview-clippath)"></path>
      </svg>
    </div>
  </div>
</div>
<div mat-dialog-actions align="end">
  <button mat-raised-button (click)="onCancel()" color="basic">Cancel</button>
  <button mat-raised-button (click)="onExport()" color="primary" [disabled]="false">
    Download
  </button>
</div>